<template>
  <div id="homePage">
    <!-- 轮播图 -->
    <Swiper :bannerData="bannerData" />
    <div class="box">
      <div
        v-for="(item, index) in cards"
        :key="index"
        class="img-box"
        @click="navigateTo(item.path)"
        :style="{ '--shadow-color': item.shadowColor }"
      >
        <img :src="item.imgSrc" />
      </div>
      <div class="bg-box">
        <div
          v-for="(item, index) in infoBoxes"
          :key="index"
          class="info-box"
          @click="navigateTo(item.path)"
        >
          <img :src="item.imgSrc" />
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <div class="main contaier">
      <div style="flex: 1">
        <div class="news fexlDf">
          <div class="left">
            <div class="bar"></div>
            <div style="font-size: 24px">高考资讯</div>
          </div>
          <div class="right fexlDf font-weight500 f14" @click="handleMoreNews">
            更多文章<el-icon><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="newlist">
          <div class="contaier" style="display: flex; flex-direction: column">
            <div v-for="(item, index) in newsList" :key="index" class="newitem">
              <div class="img">
                <img
                  :src="item.image_url"
                  alt=""
                  style="border-radius: 8px; width: 100%; height: 100%"
                />
              </div>
              <div class="info">
                <div class="title font-weight-bold" @click="handleNewDet(item)">
                  {{ item.title }}
                </div>
                <div>{{ item.source }}</div>
                <div style="display: flex; color: #aaa" class="f12">
                  <div class="page-view df" style="display: none">
                    <el-icon style="margin-right: 15px"><View /></el-icon>
                    <div style="color: red">{{ item.view_total }}</div>
                  </div>
                  <div class="time df">
                    <el-icon style="margin: 0 15px"><Clock /></el-icon>
                    <div>
                      {{ item.update_time }}
                    </div>
                    <div style="margin: 0 10px">|</div>
                    <div>{{ item.view_total }}次浏览</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-card-box">
        <!-- 暂时不要 -->
        <!-- <newActivity /> -->
        <funCards />
      </div>
    </div>

    <!-- 志愿讲堂 -->
    <div class="ziYuanMain">
      <ziYuan v-if="videoData.length" :videoData="videoData"></ziYuan>
    </div>

    <div class="yqlj" v-if="linkList.length">
      <div class="home-title">友情链接</div>
      <div>
        <a
          style="font-size: 12px; margin-right: 10px"
          v-for="(item, index) in linkList"
          :key="index"
          target="_blank"
          :href="item.domain"
          >{{ item.name }}</a
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import Swiper from '@/components/Swiper';
import ziYuan from '@/components/ziYuanLectureHall/index.vue';
import { useStore } from 'vuex';
import funCards from '@/views/home/components/FunCards/index.vue';
import { ArrowRight } from '@element-plus/icons-vue';
import { getHotNews } from '@/api/news/news';
import { getPcBannerList, Friendship } from '@/api/home/home';
import { getvideoListApi } from '@/api/zy/index';
import { View } from '@element-plus/icons-vue';
import { Clock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { getGkbInfo } from '@/api/user';
import bus from '@/utils/bus';
import { ref, onUnmounted, onMounted } from 'vue';

const bannerData = ref({});
const store = useStore();
const router = useRouter();
const newsList = ref([]);
const linkList = ref([]);
const infoBoxes = ref([
  {
    path: '/college/searchCollege',
    imgSrc: require('@/assets/images/5.png'),
    title: '找大学',
  },
  {
    path: '/majorLibrary',
    imgSrc: require('@/assets/images/6.png'),
    title: '查专业',
  },
  {
    path: '/scoreLine',
    imgSrc: require('@/assets/images/7.png'),
    title: '分数线',
  },
]);
const cards = ref([
  {
    path: '/batchInfo',
    imgSrc: require('@/assets/images/1.png'), // 使用 require 引入图片
    shadowColor: 'rgba(255, 141, 68, 0.3)',
  },
  {
    path: '/expert-one-on-one',
    imgSrc: require('@/assets/images/2.png'),
    shadowColor: 'rgba(90, 201, 253, 0.3)',
  },
  {
    path: '/appraisal',
    imgSrc: require('@/assets/images/3.png'),
    shadowColor: 'rgba(83, 100, 245, 0.3)',
  },
]);

let reqNewData = ref({
  page: 1,
  pageSize: 4,
});
const tableConfig = ref({
  search: '',
  page: 1,
  pageSize: 20,
  viewing_permission: '',
  type: '',
  status: '',
});
const videoData = ref([]);
// setFavicon('https://cos.hqq.life/img/system/logo.ico'); // 替换为新的 favicon 文件 URL
const navigateTo = (path) => {
  router.push({ path });
};
const handleMoreNews = () => {
  router.push({
    path: '/news',
  });
};
const handleGetIsGKB = (data) => {
  if (data) {
    getGkbInfo({ pid: data.id || data.pid }).then((res) => {
      if (res.data.code == 20000) {
        store.dispatch('user/changeIsGkb', res.data.data);
      }
    });
  }
};
bus.on('handleIsGkb', (data) => {
  handleGetIsGKB(data);
});
onUnmounted(() => {
  bus.off('handleIsGkb');
});
const fetchPcBannerList = () => {
  getPcBannerList().then((res) => {
    if (res.data.code == 20000) {
      bannerData.value = res.data.data;
    }
  });
};
fetchPcBannerList();
const handleNewDet = (item) => {
  router.push({
    path: '/news/detail',
    query: {
      id: item.id,
    },
  });
};
const fetchHotNews = () => {
  getHotNews(reqNewData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        newsList.value = res.data.data;
      }
    })
    .catch(() => {});
};
fetchHotNews();
//友情链接
const FriendshipLink = () => {
  Friendship({
    page: 1,
    pageSize: 999,
  }).then((res) => {
    if (res.data.code == 20000) {
      linkList.value = res.data.data.data;
    }
  });
};
FriendshipLink();
onMounted(async () => {
  const { data } = await getvideoListApi(tableConfig.value);
  const list = data.data.data.filter((item) => item.home == 1);
  videoData.value = list;
});
</script>

<style lang="scss" scoped>
$bg-color: #fff;
$title-color: #ffffff;
$transition-duration: 0.2s;
$transition-timing: linear;
$img-size: 60px;
$border-radius: 8px;
$img-border-radius: 50%;
$padding: 20px 36px 0;
$bg-image: url('@/assets/images/4.png');

@mixin transition(
  $property,
  $duration: $transition-duration,
  $timing: $transition-timing
) {
  transition: $property $duration $timing;
}
.home-title {
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
  border-left: 0;
  padding: 0;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
}
a:hover {
  color: var(--active-text);
}
#homePage {
  width: 100%;
  height: 100%;
  padding: 20px 0;

  .bg-box {
    width: 325px;
    background-color: $bg-color;
    padding: $padding;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-radius: $border-radius;
    background: $bg-image no-repeat;
    background-size: cover;

    .info-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      img {
        width: $img-size;
        height: $img-size;
        border-radius: $img-border-radius;
        margin-bottom: 5px;
        @include transition(transform);
        &:hover {
          transform: translateY(-5px);
        }
      }

      .title {
        font-weight: 600;
        font-size: 16px;
        color: $title-color;
        text-align: center;
      }
    }
  }
  .contaier {
    margin-top: 20px;
  }
  .main {
    display: flex;
  }
  .news {
    height: 28px;
    .left {
      display: flex;
      align-items: center;
      .bar {
        width: 3px;
        height: 20px;
        background: red;
        margin-right: 10px;
      }
    }
    .right {
      cursor: pointer;
      color: #999;
      &:hover {
        color: var(--active-text);
      }
    }
  }
  .newlist {
    .newitem {
      display: flex;
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
    }
    .img {
      width: 180px;
      height: 120px;
      border-radius: 8px;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20px;
      .title {
        cursor: pointer;
        &:hover {
          color: var(--active-text);
        }
      }
    }
  }
  .right-card-box {
    margin-left: 20px;
  }
}
.box {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-top: 20px;
  .img-box {
    width: 270px;
    cursor: pointer;
    img {
      width: 100%;
      border-radius: 8px;
    }
    &:hover {
      transform: translateY(-5px);
      transition: all 0.2s linear;
      box-shadow: 3px 0 20px 0 var(--shadow-color);
    }
  }
}
.ziYuanMain {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}
.yqlj {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}
</style>
